import {
    Col, Row, Button, Input, Checkbox, Table, Tag, Pagination, Tooltip, Skeleton, Image, message
    , Popconfirm, Modal, InputNumber, Descriptions
} from 'antd';
import { useNavigate } from "react-router-dom";
import { useEffect, useRef, useState } from "react";
import { addGoodsType, deleteGoodsType, getGoodsTypes } from '../../api/goods';

const { Search } = Input;
/**
 * 
 * @returns 商品类型主页
 */
const GoodsType = () => {
    document.info = [
        {
            title: "类型",
            url: "/supplier/type"
        },
        {
            title: "商品管理-主页",
            url: "/supplier",
        }
    ]

    //搜索框dom
    const myRef = useRef();
    const navigate = useNavigate();
    const { TextArea } = Input;

    // 条件搜索
    const [likeSelect, setLike] = useState({
        page: 1,
        limit: 10,
        key: '',
        isDirectly: [false],
        total: 0
    });

    //新增模态框状态
    const [open, setOpen] = useState(false);
    //表格数据
    const [tableData, setTableData] = useState([]);
    //表格加载
    const [loading, setLoading] = useState(false);
    //屏骨架
    const [isFirst, setIsFirst] = useState(true);
    const [explain, setExplain] = useState('');
    const [nameText, setName] = useState('');


    const methods = {
        //关闭模态框,清空数据
        setModalStatus: () => {
            setName("");
            setExplain("");
            setOpen(false);
        },
        //类型描述赋值
        onChangeArea: (e) => {
            setExplain(e.target.value);
        },
        //类型名称赋值
        nameOnChange: (e) => {
            setName(e.target.value);
        },
        //新增类型
        addType: async () => {
            setLoading(true);
            const res = await addGoodsType({ explain: explain, name: nameText });
            if (res.result === 0) {
                message.success(res.message);
                methods.getGoodsTypes();
                setLoading(false);
            } else {
                message.error(res.message);
                setLoading(false);
            }
            setName("");
            setExplain("");
        },
        //删除操作 模态框点击确认
        confirm: async (id) => {
            setLoading(true);
            const res = await deleteGoodsType({ id: id });
            if (res.result === 0) {
                message.success('删除成功');
                methods.getGoodsTypes();
            } else {
                message.error('删除失败');
                setLoading(false);
            }
        },
        //删除操作 模态框点击取消
        cancel: (e) => {
            message.error('已取消');
        },
        /**
         * 搜索按钮触发 和onSearch使用
         * @param {*} e 
         */
        onSearchData: (e) => {
            setLoading(true);
            setLike((likeSelect) => ({ ...likeSelect, key: e.target.value }));
        },
        //搜索按钮触发
        onSearch: (value, _e, info) => {
            setLoading(true);
            setLike((likeSelect) => ({ ...likeSelect, key: value }));
        },
        /**
         * 复选框改变事件
         * @param {*} e 
         */
        onChange: (e) => {
            setLoading(true);
            setLike((likeSelect) => ({ ...likeSelect, isDirectly: e }));
        },
        /**
         * 获取商品类型主页数据
         */
        getGoodsTypes: async () => {
            const res = await getGoodsTypes({ ...likeSelect, isDirectly: likeSelect.isDirectly[0] });
            res.data.data.map((d, i) => d.Index = i + 1)
            setLoading(false);
            setTableData(res.data);
            setLike((likeSelect) => ({ ...likeSelect, total: res.data.total }));
            setIsFirst(false);
        },
        pageChange: (value) => {
            setLoading(true);
            setLike((likeSelect) => ({ ...likeSelect, page: value }))
        },
        /**
         * 跳转新增
         */
        goAdd: () => {
            setOpen(true)
        },
        //详情按钮事件
        goDetail: (hang) => {

        },
        //删除按钮事件
        goDelete: (hang) => {

        }
    }

    const data = {
        //表格表头
        columns: [
            {
                title: '序号',
                dataIndex: 'Index',
                key: 'Index',
                width: 80
            },
            {
                title: '类型',
                dataIndex: 'name',
                key: 'name',
                width: 200,
            },
            {
                title: '商品数量',
                dataIndex: 'count',
                key: 'count',
                width: 200,
            },
            {
                title: '供应商',
                dataIndex: 'supplier',
                key: 'supplier',
                width: 170,
                onCell: () => {
                    return {
                        style: {
                            maxWidth: 170,
                            overflow: 'hidden',
                            whiteSpace: 'nowrap',
                            textOverflow: 'ellipsis',
                            cursor: 'pointer',

                        }
                    }
                },
                render: (text) => (
                    <div>
                        {text == null ? <Tag color="red" bordered={false} className="danger-tag">直营</Tag> :
                            <Tag color="blue" bordered={false} className="primary-tag">{text}</Tag>}
                    </div>
                ),
            },


            {
                title: '操作',
                dataIndex: '',
                key: '',
                fixed: "right",
                width: 225,
                render: (text, hang) => (
                    <div>
                        <div className='primary-cell btn' onClick={() => methods.goDetail(hang)}>详情</div>

                        <Popconfirm
                            style={{ width: 20 }}
                            title="删除"
                            description="该类型下存在商品，删除后那些商品将会成为无类型商品，且删除后不可恢复，确认要删除吗？"
                            onConfirm={() => { methods.confirm(hang.id) }}
                            onCancel={() => { methods.cancel(hang.id) }}
                            okText="确认"
                            cancelText="取消"
                        >
                            {hang.count > 0 && <div className='danger btn'  >删除</div>}
                        </Popconfirm>


                        <Popconfirm
                            style={{ width: 20 }}
                            title="删除"
                            description="删除后不可恢复，确认要删除吗？"
                            onConfirm={() => { methods.confirm(hang.id) }}
                            onCancel={() => { methods.cancel(hang.id) }}
                            okText="确认"
                            cancelText="取消"
                        >
                            {hang.count === 0 && <div className='danger btn'  >删除</div>}
                        </Popconfirm>

                    </div>
                )
            },

        ],
        //复选框选项
        options: [
            {
                label: '只看直营',
                value: true,
            }
        ],
        // 新增页面描述列表
        items: [
            {
                key: '1',
                label: '类型名称',
                children: <Input placeholder='类型名称' value={nameText} onChange={methods.nameOnChange}></Input>,
                span: 3,
            },
            {
                key: '2',
                label: '类型描述',
                children: <TextArea showCount maxLength={100} value={explain} onChange={methods.onChangeArea} placeholder="类型描述" />,
                span: 3,
            },
            {
                key: '3',
                label: '操作',
                children: <Button type='primary' disabled={nameText === ""} onClick={methods.addType}>新增</Button>,
                span: 3,
            },
        ]

    }









    useEffect(() => {
        methods.getGoodsTypes();
    }, [likeSelect.page, likeSelect.limit, likeSelect.key, likeSelect.isDirectly]);
    return (
        <>
            <div className='Containers'>
                <Skeleton active loading={isFirst} paragraph={{ rows: 15 }}>
                    <div className="good-head">
                        <div><Button type="primary" onClick={() => { methods.goAdd() }}>新增</Button></div>


                        <div>
                            <Search
                                placeholder="供应商/类型名称"
                                onSearch={methods.onSearch}
                                allowClear
                                style={{
                                    width: 500,
                                }}
                                onChange={(e) => methods.onSearchData(e)}
                                ref={myRef}
                            />
                        </div>


                        <div >
                            <Checkbox.Group style={{ marginRight: "150px" }} options={data.options} defaultValue={[]} onChange={methods.onChange} />

                        </div>
                    </div>

                    <Modal

                        okButtonProps={false}
                        open={open}
                        onOk={() => methods.setModalStatus()}
                        onCancel={() => methods.setModalStatus()}
                        width={900}
                        footer={null}
                    >

                        <Descriptions title="新增类型" layout="vertical" bordered items={data.items}>

                        </Descriptions>
                    </Modal>

                    <Table dataSource={tableData.data} columns={data.columns} bordered pagination={false} loading={loading}
                        style={{ marginTop: "10px" }} />

                    <div className="page-layout">
                        <Pagination defaultCurrent={likeSelect.page} total={likeSelect.total} onChange={(value) => { methods.pageChange(value) }} />
                    </div>

                </Skeleton>
            </div>

        </>
    )
}


export default GoodsType